<template>
  <div class="homework-submission-detail">
    <!-- 顶部导航栏 -->
    <TopNavbar />

    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="action-left">
        <button class="back-button" @click="handleBack">
          <img src="@/assets/back/leftback01.png" alt="返回" class="back-icon" />
          <span class="back-text">返回</span>
        </button>
        <h1 class="page-title">{{ taskName }}({{ studentName }})</h1>
      </div>
      <div class="action-right">
        <button class="action-btn cancel-btn" @click="handleCancel">取消</button>
        <button class="action-btn save-btn" @click="handleSave">保存</button>
        <button class="action-btn complete-btn" @click="handleComplete">完成</button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 左侧抽屉区 -->
      <div class="left-drawer" :class="{ collapsed: !leftDrawerOpen }">
        <div class="drawerInclude">
          <div class="drawer-header">
            <span class="drawer-title" v-if="leftDrawerOpen">拍摄图片</span>
          </div>
          <!-- 循环渲染预览图 -->
          <div class="drawer-body" v-if="leftDrawerOpen">
            <div class="photo-list">
              <div v-for="(photo, index) in photos" :key="photo.id" class="photo-item"
                :class="{ active: currentPhotoIndex === index }" @click="selectPhoto(index)" draggable="true"
                @dragstart="handleDragStart(index, $event)" @dragover="handleDragOver($event)"
                @drop="handleDrop(index, $event)">
                <div class="photo-number">{{ index + 1 }}</div>
                <img :src="photo.thumbnail" :alt="`图片${index + 1}`" class="photo-thumbnail" />
                <div class="photo-name">{{ photo.fileName || `图片${index + 1}` }}</div>
                <div class="photo-actions">
                  <el-button size="small" type="danger" @click.stop="deletePhoto(index)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 再拍一张 -->
            <div class="add-photo-area" @click="addPhoto">
              <el-icon class="add-icon">
                <Plus />
              </el-icon>
              <div class="add-text">添加图片</div>
            </div>
          </div>
        </div>

        <div class="right-drawer">
          <button class="drawer-toggle" @click="toggleLeftDrawer">
            <el-icon>
              <ArrowLeft v-if="leftDrawerOpen" />
              <ArrowRight v-else />
            </el-icon>
          </button>
        </div>


      </div>

      <!-- 主内容展示区 -->
      <div class="content-wrapper">
        <div class="canvas-area">
          <!-- 题目统计信息 -->
          <div class="question-stats">
            <el-icon class="info-icon"><InfoFilled /></el-icon>
            <span class="stats-text">共识别 10 题，正确 5 题，错误 5 题，请点击图片上的题目查看详情</span>
          </div>

          <!-- 题目内容展示 -->
          <div class="questions-content">
            <div class="section-title">一、选择题</div>

            <!-- 题目列表 -->
            <div class="question-list">
              <!-- 题目1 -->
              <div class="question-item" @click="selectQuestionItem(1)">
                <div class="question-header">
                  <span class="question-number">1、</span>
                  <span class="question-text">这里是识别题目</span>
                  <span class="question-status error">错误</span>
                </div>
                <div class="options-list">
                  <div class="option-item">
                    <span class="option-label">A、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item selected error">
                    <span class="option-label">B、</span>
                    <span class="option-text">这里是选项内容</span>
                    <el-icon class="option-icon error"><Close /></el-icon>
                  </div>
                  <div class="option-item correct">
                    <span class="option-label">C、</span>
                    <span class="option-text">这里是选项内容</span>
                    <el-icon class="option-icon correct"><Check /></el-icon>
                  </div>
                  <div class="option-item">
                    <span class="option-label">D、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                </div>
              </div>

              <!-- 题目2 -->
              <div class="question-item" @click="selectQuestionItem(2)">
                <div class="question-header">
                  <span class="question-number">2、</span>
                  <span class="question-text">这里是识别题目</span>
                  <span class="question-status correct">正确</span>
                </div>
                <div class="options-list">
                  <div class="option-item">
                    <span class="option-label">A、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">B、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item selected correct">
                    <span class="option-label">C、</span>
                    <span class="option-text">这里是选项内容</span>
                    <el-icon class="option-icon correct"><Check /></el-icon>
                  </div>
                  <div class="option-item">
                    <span class="option-label">D、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                </div>
              </div>

              <!-- 题目3 -->
              <div class="question-item" @click="selectQuestionItem(3)">
                <div class="question-header">
                  <span class="question-number">3、</span>
                  <span class="question-text">这里是识别题目</span>
                  <span class="question-status correct">正确</span>
                </div>
                <div class="options-list">
                  <div class="option-item">
                    <span class="option-label">A、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item">
                    <span class="option-label">B、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                  <div class="option-item selected correct">
                    <span class="option-label">C、</span>
                    <span class="option-text">这里是选项内容</span>
                    <el-icon class="option-icon correct"><Check /></el-icon>
                  </div>
                  <div class="option-item">
                    <span class="option-label">D、</span>
                    <span class="option-text">这里是选项内容</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部抽屉区 - 独立于主布局流 -->
    <div class="bottom-drawer" :class="{ expanded: bottomDrawerOpen }" :style="{ height: bottomDrawerOpen ? `${drawerHeight}px` : '32px' }">
      <!-- 收起状态的拖拽线 - 在触发器区域下方 -->
      <div
        v-if="!bottomDrawerOpen"
        class="drag-line collapsed-line"
        @mousedown="handleDragLineMouseDown"
        @touchstart="handleDragLineTouchStart"
      ></div>

      <!-- 底部抽屉触发器区域 -->
      <div class="bottom-trigger-area">
        <button class="bottom-drawer-toggle" @click="toggleBottomDrawer" @mousedown="handleMouseDown" @touchstart="handleTouchStart">
          <el-icon>
            <ArrowUp v-if="bottomDrawerOpen" />
            <ArrowDown v-else />
          </el-icon>
          <span class="bottom-drawer-title" v-if="!bottomDrawerOpen">
            {{  '点击图片上题目查看详情' }}
          </span>
        </button>
      </div>

      <!-- 展开状态的拖拽线 - 在触发器区域上方 -->
      <div
        v-if="bottomDrawerOpen"
        class="drag-line expanded-line"
        @mousedown="handleDragLineMouseDown"
        @touchstart="handleDragLineTouchStart"
      ></div>

      <!-- 底部抽屉内容区 -->
      <div class="bottom-drawer-include" v-if="bottomDrawerOpen">
        <!-- 收起按钮 -->
        <!-- <div class="drawer-header">
          <button class="collapse-btn" @click="toggleBottomDrawer">
            <el-icon><ArrowDown /></el-icon>
            收起
          </button>
        </div> -->

        <!-- 底部抽屉内容 -->
        <div class="bottom-drawer-content">
          <!-- 选中题目时显示题目详情 -->
          <div v-if="showQuestionDetail && selectedQuestion" class="question-detail">
            <!-- 标签页导航 -->
            <div class="detail-tabs">
              <div class="tab-item active">试卷总分</div>
              <div class="tab-item">选择题</div>
              <div class="tab-item">填空题</div>
              <div class="tab-item">简答题</div>
            </div>

            <!-- 题目详情内容 -->
            <div class="question-detail-content">
              <!-- 题目编号导航 -->
              <div class="question-numbers">
                <div v-for="i in 9" :key="i" class="question-number" :class="{ active: i === 3, correct: i <= 2, incorrect: i === 8 }">
                  {{ i }}
                </div>
              </div>

              <!-- AI应用标签 -->
              <div class="ai-tags">
                <span class="ai-tag">AI应用一</span>
                <span class="ai-tag">AI应用二</span>
                <span class="ai-tag active">AI应用一</span>
                <span class="ai-tag disabled">AI应用三（不可用）</span>
              </div>

              <!-- 题目详情 -->
              <div class="question-info">
                <div class="question-header-info">
                  <h3>题目详情</h3>
                  <div class="accuracy-rate">本题正确率：85.7%</div>
                </div>

                <div class="question-content-text">
                  这里是识别题目这里是识别题目这里是识别题目这里是识别题目这里是识别题目这里是识别题目这里是识别题目
                </div>

                <div class="answer-info">
                  <div class="answer-row">
                    <span class="label">当前答案：</span>
                    <span class="value">B</span>
                    <span class="label">正确答案：</span>
                    <span class="value">A</span>
                  </div>
                </div>

                <!-- 答题选项 -->
                <div class="answer-options">
                  <div class="option-title">答题</div>
                  <div class="options">
                    <label class="option">
                      <input type="radio" name="answer" value="correct">
                      <span class="option-text">正确</span>
                    </label>
                    <label class="option">
                      <input type="radio" name="answer" value="incorrect" checked>
                      <span class="option-text">错误</span>
                    </label>
                  </div>
                  <div class="option-note">题目回答错误，当前错误答案已输入答题框</div>
                </div>

                <!-- 题目详解 -->
                <div class="question-explanation">
                  <h4>题目详解</h4>
                  <div class="explanation-title">题目解答</div>
                  <div class="explanation-content">
                    这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答这里是题目解答
                  </div>

                  <div class="explanation-title">题目评语</div>
                  <div class="explanation-note">
                    解析：题目解答错误是题目解答错误是题目解答错误是题目解答错误是题目解答错误是题目解答错误是题目解答错误是题目解答错误
                  </div>
                </div>
              </div>

              <!-- 底部按钮 -->
              <div class="detail-actions">
                <el-button
                    :class="['error-collection-button', { 'added': isAddedToErrorCollection }]"
                    @click="toggleErrorCollection"
                  >
                    <img
                      :src="isAddedToErrorCollection ? '/src/assets/complete.png' : '/src/assets/pending.png'"
                      alt="错题集"
                      class="button-icon"
                    />
                    {{ isAddedToErrorCollection ? '已加入错题集' : '加入错题集' }}
                  </el-button>
                <el-button type="primary" class="action-button">再做一页</el-button>
              </div>
            </div>
          </div>

          <!-- 未选中题目时显示整个作业详情 -->
          <div v-else class="homework-overview">
            <!-- 标签页导航 -->
            <div class="detail-tabs">
              <div class="tab-item active">试卷总分</div>
              <div class="tab-item">选择题</div>
              <div class="tab-item">填空题</div>
              <div class="tab-item">简答题</div>
            </div>

            <!-- 作业详情内容 -->
            <div class="homework-overview-content">
              <div class="homework-title">这里是教学任务名称</div>
              <div class="homework-description">
                这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情这里是教学任务详情
              </div>

              <!-- 批改结果 -->
              <div class="grading-result">
                <div class="result-item">
                  <span class="result-label">批改结果</span>
                </div>
                <div class="result-item">
                  <span class="result-label">所属学生：</span>
                  <span class="result-value">这里是学生名称</span>
                </div>
                <div class="result-item">
                  <span class="result-label">满分：</span>
                  <span class="result-value">100</span>
                </div>
                <div class="result-item">
                  <span class="result-label">总得分：</span>
                  <span class="result-value score">40</span>
                  <el-icon class="edit-icon"><Edit /></el-icon>
                </div>
              </div>

              <!-- 底部按钮 -->
              <div class="detail-actions">
                <div class="action-buttons-row">
                  
                  <el-button type="primary" class="action-button" @click="retakePhoto">再拍一张</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  ArrowDown,
  Plus,
  Delete,
  Document,
  InfoFilled,
  Edit,
  Check,
  Close
} from '@element-plus/icons-vue'
import TopNavbar from '@/components/shared/Layout/TopNavbar.vue'

// 接口定义
interface PhotoData {
  id: string
  thumbnail: string
  fullImage: string
  fileName?: string
  fileSize?: string
  timestamp: number
  sequence?: number
}

interface GradingData {
  taskId: string
  studentId: string
  photoGradings: PhotoGrading[]
  totalScore?: number
  status: 'pending' | 'in-progress' | 'completed'
  lastModified: number
}

interface PhotoGrading {
  photoId: string
  questions: QuestionGrading[]
}

interface QuestionGrading {
  id: string
  number: number
  type: string
  content: string
  isCorrect: boolean
  score: number
  totalScore: number
  studentAnswer: string
  standardAnswer: string
  comment: string
  coordinates?: { x: number, y: number, width: number, height: number }
  notes?: string
}

interface RecognizedQuestion {
  id: string
  number: number
  type: string
  content: string
  isCorrect: boolean
  score: number
  totalScore: number
  studentAnswer: string
  standardAnswer: string
  comment: string
  coordinates: { x: number, y: number, width: number, height: number }
}

const route = useRoute()
const router = useRouter()

// 响应式数据
const taskId = ref(route.params.taskId as string)
const studentId = ref(route.query.studentId as string)
const taskName = ref(route.query.taskName as string || '教学任务')
const studentName = ref(route.query.studentName as string || '学生')

// UI状态
const leftDrawerOpen = ref(true)
const bottomDrawerOpen = ref(false)
const currentPhotoIndex = ref(0)
const draggedIndex = ref<number | null>(null)
const selectedQuestion = ref<RecognizedQuestion | null>(null)

// 底部抽屉相关状态
const drawerHeight = ref(300)
const isResizing = ref(false)
const startY = ref(0)
const startHeight = ref(0)
const showQuestionDetail = ref(false) // 控制是否显示题目详情

// 数据状态
const photos = ref<PhotoData[]>([])
const recognizedQuestions = ref<RecognizedQuestion[]>([])
const gradingData = ref<GradingData>({
  taskId: taskId.value,
  studentId: studentId.value,
  photoGradings: [],
  status: 'pending',
  lastModified: Date.now()
})

// 错题集状态
const isAddedToErrorCollection = ref(false)

// 计算属性
const currentPhoto = computed(() => {
  return photos.value[currentPhotoIndex.value] || null
})

// UI控制方法
const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value
}

const toggleBottomDrawer = () => {
  bottomDrawerOpen.value = !bottomDrawerOpen.value
  // 收起时重置题目详情显示状态
  if (!bottomDrawerOpen.value) {
    showQuestionDetail.value = false
  }
}

// 处理鼠标按下事件，区分点击和拖拽
const handleMouseDown = (event: MouseEvent) => {
  if (!bottomDrawerOpen.value) {
    // 收起状态下只处理点击
    return
  }

  // 展开状态下记录初始位置，准备判断是点击还是拖拽
  startY.value = event.clientY
  startHeight.value = drawerHeight.value

  // 添加鼠标移动和释放监听器
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)

  event.preventDefault()
}

// 鼠标移动处理 - 判断是否开始拖拽
const handleMouseMove = (event: MouseEvent) => {
  const deltaY = Math.abs(startY.value - event.clientY)

  // 如果移动距离超过5px，认为是拖拽操作
  if (deltaY > 5 && !isResizing.value) {
    isResizing.value = true
    document.removeEventListener('mousemove', handleMouseMove)
    document.addEventListener('mousemove', handleResize)
  }
}

// 鼠标释放处理 - 判断是点击还是拖拽结束
const handleMouseUp = (event: MouseEvent) => {
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', handleMouseUp)

  // 如果没有进入拖拽状态，认为是点击操作
  if (!isResizing.value) {
    toggleBottomDrawer()
  }

  isResizing.value = false
}

// 处理触摸开始事件
const handleTouchStart = (event: TouchEvent) => {
  if (!bottomDrawerOpen.value) {
    // 收起状态下只处理点击
    return
  }

  // 展开状态下记录初始位置，准备判断是点击还是拖拽
  startY.value = event.touches[0].clientY
  startHeight.value = drawerHeight.value

  // 添加触摸移动和结束监听器
  document.addEventListener('touchmove', handleTouchMove, { passive: false })
  document.addEventListener('touchend', handleTouchEnd)

  event.preventDefault()
}

// 触摸移动处理 - 判断是否开始拖拽
const handleTouchMove = (event: TouchEvent) => {
  const deltaY = Math.abs(startY.value - event.touches[0].clientY)

  // 如果移动距离超过5px，认为是拖拽操作
  if (deltaY > 5 && !isResizing.value) {
    isResizing.value = true
    document.removeEventListener('touchmove', handleTouchMove)
    document.addEventListener('touchmove', handleTouchResize, { passive: false })
  }
}

// 触摸结束处理 - 判断是点击还是拖拽结束
const handleTouchEnd = (event: TouchEvent) => {
  document.removeEventListener('touchmove', handleTouchMove)
  document.removeEventListener('touchmove', handleTouchResize)
  document.removeEventListener('touchend', handleTouchEnd)

  // 如果没有进入拖拽状态，认为是点击操作
  if (!isResizing.value) {
    toggleBottomDrawer()
  }

  isResizing.value = false
}

// 拖拽调整抽屉高度
const startResize = (event: MouseEvent) => {
  isResizing.value = true
  startY.value = event.clientY
  startHeight.value = drawerHeight.value

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  event.preventDefault()
  event.stopPropagation() // 阻止点击事件
}

const handleResize = (event: MouseEvent) => {
  if (!isResizing.value) return

  const deltaY = startY.value - event.clientY
  const maxHeight = window.innerHeight // 允许完全覆盖整个窗口
  const newHeight = Math.max(200, Math.min(maxHeight, startHeight.value + deltaY))

  // 检查是否拖拽到接近底部（距离底部小于80px时自动收起）
  const distanceFromBottom = window.innerHeight - event.clientY
  if (distanceFromBottom < 80 && bottomDrawerOpen.value) {
    // 自动收起抽屉
    bottomDrawerOpen.value = false
    showQuestionDetail.value = false
    isResizing.value = false
    document.removeEventListener('mousemove', handleResize)
    document.removeEventListener('mouseup', stopResize)
    return
  }

  drawerHeight.value = newHeight
}

const stopResize = () => {
  isResizing.value = false
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
}

// 触摸拖拽调整抽屉高度
const startTouchResize = (event: TouchEvent) => {
  isResizing.value = true
  startY.value = event.touches[0].clientY
  startHeight.value = drawerHeight.value

  document.addEventListener('touchmove', handleTouchResize, { passive: false })
  document.addEventListener('touchend', stopTouchResize)
  event.preventDefault()
  event.stopPropagation()
}

const handleTouchResize = (event: TouchEvent) => {
  if (!isResizing.value) return

  const deltaY = startY.value - event.touches[0].clientY
  const maxHeight = window.innerHeight
  const newHeight = Math.max(200, Math.min(maxHeight, startHeight.value + deltaY))

  // 检查是否拖拽到接近底部（距离底部小于80px时自动收起）
  const distanceFromBottom = window.innerHeight - event.touches[0].clientY
  if (distanceFromBottom < 80 && bottomDrawerOpen.value) {
    // 自动收起抽屉
    bottomDrawerOpen.value = false
    showQuestionDetail.value = false
    isResizing.value = false
    document.removeEventListener('touchmove', handleTouchResize)
    document.removeEventListener('touchend', stopTouchResize)
    event.preventDefault()
    return
  }

  drawerHeight.value = newHeight
  event.preventDefault()
}

const stopTouchResize = () => {
  isResizing.value = false
  document.removeEventListener('touchmove', handleTouchResize)
  document.removeEventListener('touchend', stopTouchResize)
}

// 拖拽线的处理函数
const handleDragLineMouseDown = (event: MouseEvent) => {
  // 如果是收起状态的拖拽线，展开抽屉
  if (!bottomDrawerOpen.value) {
    bottomDrawerOpen.value = true
    drawerHeight.value = 400 // 设置默认展开高度
  }

  // 开始拖拽调整高度
  isResizing.value = true
  startY.value = event.clientY
  startHeight.value = drawerHeight.value

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  event.preventDefault()
  event.stopPropagation()
}

const handleDragLineTouchStart = (event: TouchEvent) => {
  // 如果是收起状态的拖拽线，展开抽屉
  if (!bottomDrawerOpen.value) {
    bottomDrawerOpen.value = true
    drawerHeight.value = 400 // 设置默认展开高度
  }

  // 开始拖拽调整高度
  isResizing.value = true
  startY.value = event.touches[0].clientY
  startHeight.value = drawerHeight.value

  document.addEventListener('touchmove', handleTouchResize, { passive: false })
  document.addEventListener('touchend', stopTouchResize)
  event.preventDefault()
  event.stopPropagation()
}

const selectPhoto = (index: number) => {
  currentPhotoIndex.value = index
}

// 拖拽功能
const handleDragStart = (index: number, event: DragEvent) => {
  draggedIndex.value = index
  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = 'move'
  }
}

const handleDragOver = (event: DragEvent) => {
  event.preventDefault()
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'move'
  }
}

const handleDrop = (targetIndex: number, event: DragEvent) => {
  event.preventDefault()

  if (draggedIndex.value !== null && draggedIndex.value !== targetIndex) {
    const draggedPhoto = photos.value[draggedIndex.value]
    photos.value.splice(draggedIndex.value, 1)
    photos.value.splice(targetIndex, 0, draggedPhoto)

    // 更新当前选中的索引
    if (currentPhotoIndex.value === draggedIndex.value) {
      currentPhotoIndex.value = targetIndex
    } else if (currentPhotoIndex.value === targetIndex) {
      currentPhotoIndex.value = draggedIndex.value > targetIndex ? targetIndex + 1 : targetIndex - 1
    }

    ElMessage.success('图片顺序已调整')
  }

  draggedIndex.value = null
}

// 添加图片功能
const addPhoto = () => {
  // 跳转到拍照页面
  router.push({
    name: 'camera-capture',
    query: {
      context: 'homework-grading-detail',
      taskId: taskId.value,
      studentId: studentId.value,
      taskName: taskName.value,
      studentName: studentName.value,
      returnTo: 'homework-submission-detail'
    }
  })
}

// 错题集功能
const toggleErrorCollection = () => {
  isAddedToErrorCollection.value = !isAddedToErrorCollection.value
  if (isAddedToErrorCollection.value) {
    ElMessage.success('已加入错题集')
  } else {
    ElMessage.info('已从错题集移除')
  }
}

// 再拍一张功能
const retakePhoto = () => {
  router.push({
    path: '/camera-capture',
    query: {
      fromRoute: 'homework-submission-detail',
      taskId: taskId.value,
      studentId: studentId.value,
      taskName: taskName.value,
      context: 'homework-grading-detail'
    }
  })
}

// 操作按钮方法
const handleBack = () => {
  router.push({
    name: 'task-detail',
    params: { id: taskId.value },
    query: {
      fromGradingDetail: 'true'
    }
  })
}

const handleCancel = () => {
  ElMessage.info('已取消批改')
  handleBack()
}

const handleSave = async () => {
  try {
    // 保存批改进度到数据库
    gradingData.value.status = 'in-progress'
    gradingData.value.lastModified = Date.now()

    // 这里应该调用API保存数据
    console.log('保存批改数据:', gradingData.value)

    ElMessage.success('批改进度已保存')
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败，请重试')
  }
}

const handleComplete = async () => {
  try {
    // 完成批改
    gradingData.value.status = 'completed'
    gradingData.value.lastModified = Date.now()

    // 这里应该调用API保存最终结果
    console.log('完成批改:', gradingData.value)

    ElMessage.success('批改已完成')

    // 返回任务详情页面
    router.push({
      name: 'task-detail',
      params: { id: taskId.value },
      query: {
        fromGradingComplete: 'true',
        studentId: studentId.value
      }
    })
  } catch (error) {
    console.error('完成批改失败:', error)
    ElMessage.error('完成批改失败，请重试')
  }
}

// 数据加载
const loadPhotos = async () => {
  try {
    console.log('加载学生作业图片:', { taskId: taskId.value, studentId: studentId.value })

    // 从photos数据库加载学生的作业图片
    const { photosStorage } = await import('@/utils/photosDB')
    await photosStorage.init()

    const studentPhotos = await photosStorage.getStudentPhotos(taskId.value, studentId.value)

    // 同时从studentPhotos数据库加载
    const { studentPhotosStorage } = await import('@/utils/studentPhotosDB')
    await studentPhotosStorage.init()

    const studentPhotosFromDB = await studentPhotosStorage.getStudentPhotosByTask(taskId.value, studentId.value)

    // 合并两个数据源的照片
    const allPhotos = [
      ...studentPhotos.map(photo => ({
        id: photo.id,
        thumbnail: photo.thumbnail,
        fullImage: photo.fullImage,
        fileName: photo.fileName || '作业图片.jpg',
        fileSize: photo.fileSize || '32.2KB',
        timestamp: photo.timestamp,
        sequence: photos.value.length
      })),
      ...studentPhotosFromDB.map(photo => ({
        id: photo.id,
        thumbnail: photo.thumbnail,
        fullImage: photo.fullImage,
        fileName: photo.fileName || '作业图片.jpg',
        fileSize: photo.fileSize || '32.2KB',
        timestamp: photo.timestamp,
        sequence: photos.value.length
      }))
    ]

    if (allPhotos.length > 0) {
      photos.value = allPhotos
      console.log('已加载学生作业图片:', allPhotos.length, '张')
    } else {
      // 使用模拟数据进行演示
      photos.value = [
        {
          id: 'demo1',
          thumbnail: 'https://via.placeholder.com/200x250?text=作业1',
          fullImage: 'https://via.placeholder.com/800x1000?text=作业1',
          fileName: '作业第1页.jpg',
          fileSize: '32.2KB',
          timestamp: Date.now(),
          sequence: 0
        },
        {
          id: 'demo2',
          thumbnail: 'https://via.placeholder.com/200x250?text=作业2',
          fullImage: 'https://via.placeholder.com/800x1000?text=作业2',
          fileName: '作业第2页.jpg',
          fileSize: '28.5KB',
          timestamp: Date.now(),
          sequence: 1
        }
      ]
      console.log('使用模拟数据进行演示')
    }
  } catch (error) {
    console.error('加载学生作业图片失败:', error)
    ElMessage.error('加载作业图片失败')
  }
}

// 删除图片功能
const deletePhoto = async (index: number) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除图片 "${photos.value[index].fileName}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    photos.value.splice(index, 1)

    // 调整当前选中的索引
    if (currentPhotoIndex.value >= photos.value.length) {
      currentPhotoIndex.value = Math.max(0, photos.value.length - 1)
    }

    ElMessage.success('图片已删除')
  } catch {
    // 用户取消删除
  }
}

// 题目相关方法
const selectQuestion = (question: RecognizedQuestion) => {
  selectedQuestion.value = question
  showQuestionDetail.value = true
  bottomDrawerOpen.value = true
}

// 选择题目项的方法
const selectQuestionItem = (questionNumber: number) => {
  // 创建一个模拟的题目对象
  const mockQuestion: RecognizedQuestion = {
    id: `question-${questionNumber}`,
    number: questionNumber,
    type: '选择题',
    content: `这里是识别题目 ${questionNumber}`,
    coordinates: { x: 0, y: 0, width: 100, height: 50 },
    isCorrect: questionNumber !== 1, // 第1题错误，其他正确
    score: questionNumber !== 1 ? 5 : 0,
    totalScore: 5,
    studentAnswer: questionNumber === 1 ? 'B' : 'C',
    standardAnswer: 'C',
    comment: ''
  }

  selectedQuestion.value = mockQuestion
  showQuestionDetail.value = true
  bottomDrawerOpen.value = true

  // 如果抽屉没有展开，设置一个合适的高度
  if (!bottomDrawerOpen.value || drawerHeight.value < 300) {
    drawerHeight.value = 400
  }
}

const getQuestionStyle = (question: RecognizedQuestion) => {
  const { x, y, width, height } = question.coordinates
  return {
    position: 'absolute' as const,
    left: `${x}%`,
    top: `${y}%`,
    width: `${width}%`,
    height: `${height}%`
  }
}

const markCorrect = () => {
  if (selectedQuestion.value) {
    selectedQuestion.value.isCorrect = true
    selectedQuestion.value.score = selectedQuestion.value.totalScore
    ElMessage.success('已标记为正确')
  }
}

const markIncorrect = () => {
  if (selectedQuestion.value) {
    selectedQuestion.value.isCorrect = false
    selectedQuestion.value.score = 0
    ElMessage.success('已标记为错误')
  }
}

const saveQuestionGrading = async () => {
  if (!selectedQuestion.value) return

  try {
    // 保存题目批改结果
    console.log('保存题目批改:', selectedQuestion.value)
    ElMessage.success('题目批改已保存')
  } catch (error) {
    console.error('保存题目批改失败:', error)
    ElMessage.error('保存失败，请重试')
  }
}

// 加载模拟题目数据
const loadRecognizedQuestions = () => {
  recognizedQuestions.value = [
    {
      id: 'q1',
      number: 1,
      type: '选择题',
      content: '下列哪个选项是正确的？',
      isCorrect: true,
      score: 5,
      totalScore: 5,
      studentAnswer: 'A',
      standardAnswer: 'A',
      comment: '答案正确',
      coordinates: { x: 10, y: 20, width: 80, height: 15 }
    },
    {
      id: 'q2',
      number: 2,
      type: '填空题',
      content: '请填写正确答案：___',
      isCorrect: false,
      score: 0,
      totalScore: 10,
      studentAnswer: '错误答案',
      standardAnswer: '正确答案',
      comment: '答案有误，需要重新思考',
      coordinates: { x: 10, y: 40, width: 80, height: 15 }
    },
    {
      id: 'q3',
      number: 3,
      type: '计算题',
      content: '计算：2 + 3 = ?',
      isCorrect: true,
      score: 8,
      totalScore: 10,
      studentAnswer: '5',
      standardAnswer: '5',
      comment: '计算正确，但步骤可以更详细',
      coordinates: { x: 10, y: 65, width: 80, height: 20 }
    }
  ]
}

// 处理从相机返回的新照片
const handleReturnFromCamera = async () => {
  if (route.query.fromCameraCapture === 'true' && route.query.photoAdded === 'true') {
    // 重新加载照片列表
    await loadPhotos()
    ElMessage.success('新照片已添加')

    // 清理URL参数
    router.replace({
      name: 'homework-submission-detail',
      params: { taskId: taskId.value },
      query: {
        studentId: studentId.value,
        studentName: studentName.value,
        taskName: taskName.value
      }
    })
  }
}

onMounted(async () => {
  console.log('批改详情页面加载:', {
    taskId: taskId.value,
    studentId: studentId.value,
    taskName: taskName.value,
    studentName: studentName.value
  })

  await loadPhotos()
  loadRecognizedQuestions()
  handleReturnFromCamera()
})
</script>

<style scoped>
/* 底部抽屉容器样式 */
:deep(.bottom-drawer-container) {
  z-index: 1000;
}

:deep(.bottom-drawer-container .el-drawer) {
  background: transparent;
}

:deep(.bottom-drawer-container .el-drawer__body) {
  padding: 0;
  background: #f5f7fa;
}

/* 底部抽屉触发器样式 */
.bottom-drawer-trigger {
  height: 50px;
  background: #fff;
  border-top: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.bottom-drawer-trigger:hover {
  background: #f5f7fa;
}

.trigger-icon {
  color: #409EFF;
  font-size: 16px;
}

.trigger-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}



.question-detail {
  width: 100%;
  margin: 0;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.question-score {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.total-score {
  font-size: 14px;
  color: #909399;
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.detail-section p {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  background: #f5f7fa;
  padding: 12px;
  border-radius: 6px;
}

.detail-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.no-question-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
}

.no-question-selected p {
  margin: 16px 0 0 0;
  font-size: 16px;
}

.homework-submission-detail {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  overflow: hidden;
  padding-top: 114px;
}

/* 操作栏样式 */
.action-bar {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 54px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 999;
  box-shadow: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.action-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s;
}

.back-button:hover {
  background: #f5f7fa;
}

.back-icon {
  width: 20px;
  height: 20px;
}

.back-text {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.action-right {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.cancel-btn {
  background: #fff;
  color: #606266;
  border-color: #dcdfe6;
}

.cancel-btn:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.save-btn {
  background: #fff;
  color: #409EFF;
  border-color: #409EFF;
}

.save-btn:hover {
  background: #ecf5ff;
}

.complete-btn {
  background: #409EFF;
  color: #fff;
  border-color: #409EFF;
}

.complete-btn:hover {
  background: #66b1ff;
}

/* 内容区域 */
.content-area {
  position: fixed;
  top: 114px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
  z-index: 1;
}

/* 左侧抽屉 */
.left-drawer {
  width: 300px;
  display: flex;
  flex-direction: row;
  transition: all 0.3s;
}

.left-drawer.collapsed {
  width: 20px;
}

/* .left-drawer.collapsed {
  width: 28px;
} */

.left-drawer .drawerInclude {
  width: 100%;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  transition: all 0.3s;
}

.left-drawer.collapsed .drawerInclude {
  width: 0;
  overflow: hidden;
}

.drawer-header {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  /* border-bottom: 1px solid #e4e7ed; */
  /* background: #fafafa; */
}

.drawer-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.right-drawer {
  width: 12px;
  height: 100%;
  border: 1px ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.drawer-toggle {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-left: none;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 60px;
  position: relative;
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.drawer-toggle:hover {
  background: #f5f7fa;
}

.toggle-icon {
  font-size: 12px;
  color: #606266;
}

.drawer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.photo-list {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.photo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.photo-item:hover {
  border-color: #409EFF;
  background: #f0f9ff;
}

.photo-item.active {
  border-color: #409EFF;
  background: #ecf5ff;
}

.photo-number {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 20px;
  height: 20px;
  background: #409EFF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.photo-thumbnail {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.photo-name {
  font-size: 12px;
  color: #606266;
  text-align: center;
  word-break: break-all;
}

.add-photo-area {
  margin: 16px;
  padding: 20px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.add-photo-area:hover {
  border-color: #409EFF;
  background: #f0f9ff;
}

.add-icon {
  width: 32px;
  height: 32px;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #909399;
  transition: all 0.3s;
}

.add-photo-area:hover .add-icon {
  border-color: #409EFF;
  color: #409EFF;
}

.add-text {
  font-size: 14px;
  color: #909399;
  transition: all 0.3s;
}

.add-photo-area:hover .add-text {
  color: #409EFF;
}

/* 画布区域 */
.canvas-area {
  background: #fff;
  height: 100%;
  padding: 20px;
  border-radius: 16px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* 内容包装层 */
.content-wrapper {
  padding: 50px 160px 60px 160px;
  background: transparent;
  flex: 1;
  border-radius: 8px;
}

/* 题目统计信息 */
.question-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #e8f4fd;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  margin-bottom: 24px;
}

.info-icon {
  color: #409eff;
  font-size: 16px;
}

.stats-text {
  color: #409eff;
  font-size: 14px;
  font-weight: 500;
}

/* 题目内容展示 */
.questions-content {
  background: #fff;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  padding: 0px 0 12px 0;
}

/* 题目列表 */
.question-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 题目项 */
.question-item {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  /* margin-bottom: 12px; */
}

.question-item:hover {
  background: rgba(64, 158, 255, 0.05);
}

.question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  /* padding: 12px 0; */
  background: transparent;
  border-bottom: none;
}


.question-text {
  flex: 1;
  font-size: 16px;
  color: #303133;
}

.question-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.question-status.correct {
  background: #f0f9ff;
  color: #67c23a;
}

.question-status.error {
  background: #fef0f0;
  color: #f56c6c;
}

/* 选项列表 */
.options-list {
  /* padding: 10px 0 0 0; */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s;
  position: relative;
}

.option-item.selected {
  border: none;
  margin-left: 18px;
}

.option-item.selected.correct {
  background: #f0f9ff;
  border: none;
  margin-left: 18px;
}

.option-item.selected.error {
  background: #fef0f0;
  border: none;
  margin-left: 18px;
}

.option-item.correct:not(.selected) {
  background: #f0f9ff;
  border: none;
  margin-left: 18px;
}

.option-label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  min-width: 24px;
}

.option-text {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.option-icon {
  position: absolute;
  right: 16px;
  font-size: 18px;
}

.option-icon.correct {
  color: #67c23a;
}

.option-icon.error {
  color: #f56c6c;
}

.canvas-container {
  flex: 1;
  position: relative;
  overflow: auto;
}

.photo-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.question-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sample-question {
  pointer-events: auto;
  cursor: pointer;
}

.question-box {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #409EFF;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.question-number {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.question-type {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
}

.question-status {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
}

.question-status.correct {
  background: #67c23a;
  color: #fff;
}

.question-status.incorrect {
  background: #f56c6c;
  color: #fff;
}

.question-content {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.empty-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-message {
  text-align: center;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
}

/* 拖拽线样式 */
.drag-line {
  width: 100%;
  height: 1px;
  background: #e4e7ed;
  border: none;
  cursor: ns-resize;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1001;
}

.drag-line:hover {
  background: #409EFF;
  height: 2px;
}

/* 收起状态的拖拽线 - 在触发器区域下方 */
.collapsed-line {
  position: absolute;
  top: 32px; /* 紧贴触发器区域下方 */
  left: 0;
  right: 0;
}

/* 展开状态的拖拽线 - 在触发器区域上方 */
.expanded-line {
  position: absolute;
  top: 0; /* 在触发器区域上方 */
  left: 0;
  right: 0;
}

/* 底部抽屉 */
.bottom-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: none;
  max-height: 100vh;
  background: transparent;
  pointer-events: none;
}

.bottom-drawer.expanded {
  height: auto;
  min-height: 300px;
  max-height: 100vh;
  z-index: 1100;
  position: relative; /* 为拖拽线提供定位上下文 */
}

.bottom-drawer > * {
  pointer-events: auto;
}



/* 底部触发器区域 */
.bottom-trigger-area {
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 1000; /* 确保触发器在拖拽线之上 */
}

.bottom-drawer-toggle {
  background: #fff;
  border: 1px solid #e4e7ed;
  border-bottom: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  position: relative;
  padding: 0 12px;
  gap: 8px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  width: auto;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.bottom-drawer.expanded .bottom-drawer-toggle {
  width: 100%;
  height: 100%;
  justify-content: center;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: none;
  cursor: ns-resize;
  touch-action: pan-y;
}

.bottom-drawer-toggle:hover {
  background: #f5f7fa;
}

/* 底部抽屉内容区 */
.bottom-drawer-include {
  flex: 1;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-top: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bottom-drawer:not(.expanded) .bottom-drawer-include {
  height: 0;
  overflow: hidden;
}

.bottom-drawer-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

/* 抽屉头部 */
.drawer-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.collapse-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
}

.collapse-btn:hover {
  color: #409EFF;
}

/* 底部抽屉内容样式 */
.bottom-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

/* 标签页导航 */
.detail-tabs {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  background: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  margin: 0;
}

.tab-item.active {
  color: #409EFF;
  border-bottom-color: #409EFF;
}

.tab-item:hover:not(.active) {
  color: #409EFF;
}

/* 整个作业详情样式 */
.homework-overview {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.homework-overview-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  width: 100%;
  margin: 0;
}

.homework-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.homework-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* 批改结果 */
.grading-result {
  margin-bottom: 24px;
}

.result-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.result-label {
  color: #606266;
  margin-right: 8px;
}

.result-value {
  color: #303133;
  font-weight: 500;
}

.result-value.score {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 600;
}

.edit-icon {
  margin-left: 8px;
  color: #909399;
  cursor: pointer;
}

.edit-icon:hover {
  color: #409EFF;
}

/* 题目详情样式 */
.question-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.question-detail-content {
  flex: 1;
  padding: 16px 20px 20px 20px;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* 题目编号导航 */
.question-numbers {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.question-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #606266;
}

.question-number.active {
  background: #409EFF;
  color: #fff;
  border-color: #409EFF;
}

.question-number.correct {
  background: #67c23a;
  color: #fff;
  border-color: #67c23a;
}

.question-number.incorrect {
  background: #f56c6c;
  color: #fff;
  border-color: #f56c6c;
}

/* AI应用标签 */
.ai-tags {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.ai-tag {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  color: #606266;
  background: #fff;
}

.ai-tag.active {
  background: #409EFF;
  color: #fff;
  border-color: #409EFF;
}

.ai-tag.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 题目信息 */
.question-info {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.question-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.question-header-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.accuracy-rate {
  font-size: 12px;
  color: #f39c12;
  background: #fef9e7;
  padding: 4px 8px;
  border-radius: 4px;
}

.question-content-text {
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.answer-info {
  margin-bottom: 16px;
}

.answer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.answer-row .label {
  color: #606266;
}

.answer-row .value {
  color: #303133;
  font-weight: 500;
}

/* 答题选项 */
.answer-options {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.option-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

.options {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

.option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
}

.option input[type="radio"] {
  margin: 0;
}

.option-note {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

/* 题目详解 */
.question-explanation {
  margin-bottom: 20px;
}

.question-explanation h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.explanation-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.explanation-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 16px;
}

.explanation-note {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

/* 底部操作按钮 */
.detail-actions {
  display: flex;
  justify-content: center;
  padding: 16px 20px;
  border-top: 1px solid #e4e7ed;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.action-buttons-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.error-collection-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.error-collection-button:hover {
  border-color: #409eff;
  color: #409eff;
}

.error-collection-button.added {
  border-color: #67c23a;
  color: #67c23a;
  background: #f0f9ff;
}

.button-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.action-button {
  flex: 1;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
}

.drawer-trigger {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: #fafafa;
  transition: all 0.3s;
}

.drawer-trigger:hover {
  background: #f0f2f5;
}

.trigger-text {
  font-size: 14px;
  color: #606266;
}

.trigger-arrow {
  font-size: 12px;
  color: #909399;
}

.drawer-detail {
  padding: 20px;
  height: 160px;
  overflow-y: auto;
}

.detail-placeholder {
  text-align: center;
  color: #909399;
}

.detail-placeholder p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .left-drawer {
    width: 240px;
  }

  .left-drawer.collapsed {
    width: 50px;
  }
}

/* iPad 兼容性 */
@media (max-width: 1024px) and (min-width: 769px) {
  .action-bar {
    padding: 0 20px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .action-left,
  .action-right {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .action-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .canvas-area {
    padding: 20px;
  }

  .question-item {
    margin-bottom: 16px;
  }

  .bottom-drawer {
    max-height: 100vh;
  }

  .bottom-drawer.expanded {
    min-height: 250px;
    max-height: 100vh;
  }

  .bottom-drawer-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  .bottom-drawer.expanded .bottom-drawer-toggle {
    touch-action: pan-y;
    cursor: ns-resize;
  }
}

@media (max-width: 768px) {
  .action-bar {
    padding: 0 16px;
  }

  .action-left {
    gap: 12px;
  }

  .page-title {
    font-size: 16px;
  }

  .action-right {
    gap: 8px;
  }

  .action-btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  .left-drawer {
    width: 200px;
  }

  .photo-thumbnail {
    width: 60px;
    height: 80px;
  }

  .canvas-area {
    padding: 16px;
  }

  .bottom-drawer.expanded {
    min-height: 200px;
    max-height: 100vh;
  }
}

@media (max-width: 480px) {
  .action-left {
    flex: 1;
  }

  .page-title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .left-drawer {
    width: 160px;
  }

  .bottom-drawer.expanded {
    min-height: 150px;
    max-height: 100vh;
  }
}
</style>